<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500"></canvas>


</body>
<!-- <script src="http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"></script> -->

<script src="./js/three.js"></script>

<script src="./js/gltfLoad.js"></script>

<script>
    var canvas = document.getElementById('canvas');

    //将Canvas绑定到 renderer
    var renderer = new THREE.WebGLRenderer({
        canvas
    });

    // console.log(renderer);

    var width = canvas.clientWidth;
    var height = canvas.clientHeight;

    //将渲染的大小设为与Canvas相同
    renderer.setSize(width, height);

    //设置默认颜色与透明度 16进制 
    // renderer.setClearColor(0xFFFFFF, 1.0); 

    // 创建场景
    var scene = new THREE.Scene()


    // 透视投影照相机  THREE.PerspectiveCamera(fov, aspect, near, far)  
    var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);

    // 设置照相机偏移
    camera.position.set(0, 0, 5);

    // 添加照相机到场景中
    scene.add(camera);

    var mixers = [];
    var clock = new THREE.Clock();
    (function(){
        var loader = new THREE.GLTFLoader();
        loader.load( './model/test.gltf', function( gltf ) {

            // console.log(gltf);


            var axesHelper = new THREE.AxesHelper( 5 );

            scene.add( axesHelper );

            scene.add( gltf.scene ); // 将模型引入three


            // 调用动画
            var mixer = new THREE.AnimationMixer( gltf.scene.children[2] ); 
            mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
            mixers.push( mixer );
        })
    })();


    renderer.render(scene, camera);
</script>

</html>